<!-- 分成规则设置 -->
<template>
  <div class="rulePage">
    <div class="headBox">
      <div class="label">分成设置</div>
      <div class="item">
        佣金规则说明：按单笔订单结算。
        <div>平台佣金 = 订单金额 * 平台佣金比例（%）；</div>
        <div>渠道分成 = 平台佣金 * 渠道分成比例（%）；</div>
        <div>发起邀请的专家返利 = 平台佣金 * 发起邀请的专家返利比例（%）；</div>
      </div>
    </div>
    <el-form
      :model="form"
      ref="form"
      label-width="180px"
      :inline="false"
      label-position="left"
      size="normal"
    >
      <div class="title">即时咨询</div>
      <div class="pa-20">
        <el-form-item label="平台佣金:">
          <div class="disFlx">
            <div class="color6">订单金额</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color9">%</div>
          </div>
        </el-form-item>
        <el-form-item label="渠道分成:">
          <div class="disFlx">
            <div class="color6">平台佣金</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10 color6">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9">说明：从平台佣金中分成</div>
          </div>
        </el-form-item>
        <el-form-item label="发起邀请的专家返利:">
          <div class="disFlx">
            <div class="color6">平台佣金</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9">说明：从平台佣金中返利</div>
          </div>
        </el-form-item>
        <el-form-item label="新增单位默认提成:">
          <div class="disFlx">
            <div class="color6">（订单金额 - 平台佣金）</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9" style="max-width: 330px">
              说明：平台抽佣后剩余的金额，单位从中的提成比例，剩余为专家所得。单位可在后台自行调整
            </div>
          </div>
        </el-form-item>
      </div>

      <div class="title">预约咨询</div>
      <div class="pa-20">
        <el-form-item label="平台佣金:">
          <div class="disFlx">
            <div class="color6">订单金额</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
          </div>
        </el-form-item>
        <el-form-item label="渠道分成:">
          <div class="disFlx">
            <div class="color6">平台佣金</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10 color6">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9">说明：从平台佣金中分成</div>
          </div>
        </el-form-item>
        <el-form-item label="发起邀请的专家返利:">
          <div class="disFlx">
            <div class="color6">平台佣金</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9">说明：从平台佣金中返利</div>
          </div>
        </el-form-item>
        <el-form-item label="新增单位默认提成:">
          <div class="disFlx">
            <div class="color6">（订单金额 - 平台佣金）</div>
            <div class="pl-10 color6">X</div>
            <div class="pl-10">
              <el-input-number
                v-model="form.name"
                :min="1"
                :max="100"
              ></el-input-number>
            </div>
            <div class="pl-10 color6">%</div>
            <div class="pl-40 color9" style="max-width: 330px">
              说明：平台抽佣后剩余的金额，单位从中的提成比例，剩余为专家所得。单位可在后台自行调整
            </div>
          </div>
        </el-form-item>
      </div>
    </el-form>

    <div class="tc pa-20">
      <el-button type="primary" @click="submitForm">保存设置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Rule",
  data() {
    return {
      form: {
        name: "",
      },
    };
  },

  methods: {
    // 保存设置
    submitForm(){

    }
  },

  created() {},

  computed: {},
};
</script>
<style lang='scss' scoped>
.rulePage {
  padding: 0 20px;
  .headBox {
    display: flex;
    align-items: center;
    padding: 20px;
    .label {
      width: 180px;
      font-size: 14px;
      color: #606266;
      font-weight: 700;
    }
    .item {
      color: #e65d6e;
      font-size: 14px;
    }
  }
  .pa-20 {
    padding: 20px;
  }
  .title {
    background-color: #f8f8f9;
    line-height: 40px;
    padding: 0 20px;
    font-weight: bold;
  }
  .disFlx {
    display: flex;
  }
  .pl-10 {
    padding-left: 10px;
  }
  .pl-40 {
    padding-left: 40px;
    font-size: 12px;
  }
  .color6 {
    color: #666666;
  }
  .color9 {
    color: #999999;
  }
  .tc{
    text-align: center;
  }
}
</style>
